<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="p-3">

		<view class="card">
			<image class="bgc" src="/static/images/merchant/wellet.svg" mode="aspectFill"></image>
			<image class="headimg" :src="merchartShop.image" mode=""></image>
			<view class="left" @click="gopage('/pages/merchant/shopInfo/shopInfo')">
				<view class="one flex content-center">
					<view class="me-text-beyond" style="width: 440rpx;">
						{{merchartShop.name}}
					</view>
				</view>
				<view class="two flex content-center">
					<view class="flex content-center" style="margin-right: 20rpx;">
						<span v-if="isShow">营业中</span>
						<span v-else>歇业中</span>
					</view>
					<view class="flex content-center">
						营业时间 {{formatDateTime(merchartShop.startTime,'hh:mm')}} - {{formatDateTime(merchartShop.endTime,'hh:mm')}}
					</view>
				</view>
				<view class="four flex flex-column">
					<view class="" style="margin-right: 20rpx;">
						地址：{{merchartShop.addressMap + ' ' + merchartShop.address}}
					</view>
					<view class="">
						电话：{{merchartShop.mobile}}
					</view>
				</view>
			</view>
		</view>

		<view class="card_one">
			<view class="card_one_item flex content-center line" @click="gopage('/pages/components/pages/merchant/shopInfo')">
				<image src="/static/images/merchant/myshop.svg" mode=""></image>
				<view class="text">
					店铺资料
				</view>
			</view>
			<view class="card_one_item flex content-center line" 
				@click="gopage('/pages/components/pages/merchant/cashAccount')">
				<image src="/static/images/merchant/myaccount.svg" mode=""></image>
				<view class="text">
					提现账号
				</view>
			</view>
			<view class="card_one_item flex content-center" @click="gopage('/pages/components/pages/merchant/withdrawal')">
				<image src="/static/images/merchant/mywith.png" mode=""></image>
				<view class="text">
					提现明细
				</view>
			</view>
		</view>

		<uv-tabbar :value="value" @change="index=>value = index" activeColor="#09b4f1">
			<uv-tabbar-item text="首页" icon="home" @click="gopage('/pages/components/pages/merchant/index')"></uv-tabbar-item>
			<uv-tabbar-item text="订单" icon="order" @click="gopage('/pages/components/pages/merchant/order')"></uv-tabbar-item>
			<uv-tabbar-item text="桌台" icon="bell" @click="gopage('/pages/components/pages/merchant/bell')"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="gopage('/pages/components/pages/merchant/my')"></uv-tabbar-item>
			<uv-tabbar-item text="返回" icon="arrow-leftward" @click="gopage2('/pages/index/index')"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
	getRevenue
} from '@/api/merchant'
import { onLoad} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { formatDateTime } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('我的')
const isShow = ref(true)
const value = ref(3)

const gopage = (url) =>{
	uni.navigateTo({
		url
	})

}

const getTime = () => {
	let date = new Date() 
	let hour = date.getHours()
	
	let endHour= new Date(merchartShop.value.endTime).getHours()
	let startHour = new Date(merchartShop.value.startTime).getHours()

	if(merchartShop.value.status == 1){
		if (hour >= startHour && hour <= endHour ) {
			isShow.value = true
		}else{
			isShow.value = false
		}
	}else{
		isShow.value = false
	}
	
}

getTime()

</script>

<style lang="scss">

	.line {
		border-bottom: 1rpx solid #f3f3f3;
	}


	.card {
		position: relative;

		.bgc {
			width: 700rpx;
			height: 270rpx;
			border-radius: 20rpx;
		}

		.headimg {
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
			position: absolute;
			top: 38rpx;
			left: 40rpx;
		}

		.left {
			position: absolute;
			top: 38rpx;
			left: 194rpx;

			.one {
				font-size: 40rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 56rpx;

				image {
					width: 42rpx;
					height: 42rpx;
					margin: 4rpx 0 0 10rpx;
				}
			}

			.two {
				font-size: 24rpx;
				color: #FFFFFF;
				margin: 16rpx 0;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
				}
			}

			.three {
				margin: 20rpx 0;

				.three_item {
					width: 114rpx;
					height: 44rpx;
					background: #93DBFF;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #0075AF;
					text-align: center;
					line-height: 44rpx;
				}
			}

			.four {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.card_one {
		border-radius: 14rpx;
		width: 700rpx;
		background-color: #fff;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
		margin: 40rpx 0;

		.card_one_item {
			height: 110rpx;
			line-height: 110rpx;
			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}

			.text {
				font-size: 28rpx;
				color: #333333;
				line-height: 50rpx;
				font-weight: 600;

			}
		}
	}
</style>
